<template>
	<view class="login-container">
		<!-- 标题部分 -->
		<view style="margin-top: 50rpx;margin-bottom: 50rpx;">
			<u-avatar src="/static/map.jpg" size="large"></u-avatar>
		</view>
		<view class="title-section">
			<text class="main-title">欢迎使用智慧零工平台</text>
			<text class="sub-title">随时随地，便捷找工</text>
		</view>

		<!-- 表单部分 -->
		<u-form :model="form" ref="uForm" label-width="150" class="form-section">
			<u-form-item label="手机号码" prop="phone">
				<u-input v-model="form.phone" placeholder="请输入手机号码" type="number" maxlength="11" />
			</u-form-item>

			<u-form-item label="验证码" prop="code">
				<view class="code-input">
					<u-input v-model="form.code" placeholder="验证码" type="number" maxlength="6" />
					<button @click="getCode()" :disabled="codeDisabled" class="code-btn"
						:class="{'u-btn--disabled': codeDisabled}">
						{{ codeBtnText }}
					</button>
				</view>
			</u-form-item>

			<!-- 注册时才显示的角色选择 -->
			<u-form-item label="用户类型" prop="role" v-if="isRegister">
				<u-radio-group v-model="form.role">
					<u-radio name="user">普通用户</u-radio>
					<u-radio name="company">企业用户</u-radio>
				</u-radio-group>
			</u-form-item>

			<view style="margin-top:150rpx;">
				<button @click="handleAction('login')" class="login-btn">
					{{ isLoginReady ? '立即登录' : '切换登录' }}
				</button>
				<button @click="handleAction('register')" class="register-btn">
					{{ isRegisterReady ? '立即注册' : '切换注册' }}
				</button>
			</view>

			<view class="agreement">
				<u-checkbox v-model="form.agreed" shape="circle"></u-checkbox>
				<text class="agreement-text">我已阅读并同意《隐私协议》和《用户协议》</text>
			</view>
		</u-form>
	</view>
</template>
<script>
	import {
		detail,
		login,
		register
	} from '../utils/api/modules/user';

	export default {
		data() {
			return {
				form: {
					phone: '',
					code: '',
					role: 'user',
					agreed: false
				},
				isRegister: false, // 当前是否为注册模式
				isLoginReady: false, // 登录表单是否准备就绪
				isRegisterReady: false, // 注册表单是否准备就绪
				codeDisabled: false,
				codeBtnText: '获取验证码',
				countdown: 60,
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
						},
						{
							validator: (rule, value, callback) => {
								return /^1[3-9]\d{9}$/.test(value);
							},
							message: '手机号格式不正确',
						}
					],
					code: [{
						required: true,
						message: '请输入验证码',
					}],
					role: [{
						required: true,
						message: '请选择用户类型',
					}]
				}
			}
		},
		methods: {
			getCode() {
				this.codeDisabled = true;
				this.codeBtnText = `${this.countdown}秒后重试`;
				const timer = setInterval(() => {
					this.countdown--;
					this.codeBtnText = `${this.countdown}秒后重试`;

					if (this.countdown <= 0) {
						clearInterval(timer);
						this.codeDisabled = false;
						this.codeBtnText = '获取验证码';
						this.countdown = 60;
					}
				}, 1000);
			},

			// 统一处理登录/注册动作
			handleAction(type) {
				// 第一次点击：切换表单状态
				if ((type === 'login' && !this.isLoginReady) || 
					(type === 'register' && !this.isRegisterReady)) {
					this.isRegister = type === 'register';
					this.isLoginReady = type === 'login';
					this.isRegisterReady = type === 'register';
					return;
				}
				
				// 第二次点击：提交表单
				if (type === 'login') {
					this.handleLogin();
				} else {
					this.handleRegister();
				}
			},

			// 登录
			async handleLogin() {
				try {
					const valid = await this.$refs.uForm.validate();
					if (!valid) return;
					if (!this.form.agreed) {
						uni.showToast({
							title: '请先阅读并同意协议',
							icon: 'none'
						});
						return;
					}
					const response = await login(this.form);
					this.$store.commit('SET_TOKEN', response.data);
					detail({
						token: response.data
					}).then(res => {
						this.$store.commit('SET_USER', res.data);
						uni.switchTab({
							url: '/pages/index/index'
						});
					});
				} catch (error) {
					this.$showToast(error.message || '登录失败');
				}
			},

			// 注册
			async handleRegister() {
				try {
					const valid = await this.$refs.uForm.validate();
					if (!valid) return;
					if (!this.form.agreed) {
						uni.showToast({
							title: '请先阅读并同意协议',
							icon: 'none'
						});
						this.form.agreed = !this.form.agreed;
						return;
					}
					
					const response = await register(this.form);
					this.$store.commit('SET_TOKEN', response.data);
					detail({
						token: response.data
					}).then(res => {
						this.$store.commit('SET_USER', res.data);
							uni.showToast({
								title: '请先阅读并同意协议',
								icon: 'none'
							});
							setTimeout(() => {
								uni.showToast({
									title: '注册成功',
									icon: 'none'
								}).then(()=>{
									uni.switchTab({
										url: '/pages/index/index'
									});
								});
								
							}, 900);
						}
					);
				} catch (error) {
					this.$showToast(error.message || '注册失败');
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

</script>
<style lang="scss" scoped>
	.login-container {
		padding: 40rpx;
		background-color: #fff;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.time-display {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			margin-top: 40rpx;
			margin-bottom: 80rpx;
		}

		.title-section {
			margin-bottom: 80rpx;
			text-align: left;

			.main-title {
				display: block;
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.sub-title {
				display: block;
				font-size: 28rpx;
				color: #999;
			}
		}

		.form-section {
			::v-deep .u-form-item {
				margin-bottom: 40rpx;

				.u-input {
					/* 移除下边框 */
					border-bottom: none;
					padding-bottom: 0;
				}
			}
 
			.code-input {
				display: flex;
				align-items: center;

				::v-deep .u-input {
					flex: 1;
					margin-right: 20rpx;
					/* 移除下边框 */
					border-bottom: none;
				}

				.code-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #2979ff;
					border-radius: 30rpx;
					border: none;

					&--disabled {
						background-color: #ccc;
					}
				}
			}

			.login-btn {
				margin-top: 60rpx;
				margin-bottom: 30rpx;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				color: #fff;
				background-color: #2979ff;
				border-radius: 40rpx;
				font-size: 32rpx;
				border: none;
			}

			.register-btn {
				margin-bottom: 40rpx;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				color: #666;
				background-color: transparent;
				border: 1rpx solid #666;
				border-radius: 40rpx;
				font-size: 32rpx;
			}

			.agreement {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #666;
				margin-top: 250rpx;

				.agreement-text {
					margin-left: 10rpx;
				}
			}
		}
	}
</style>